<template>
  <div class="CreateMath-Panel">
    <el-dialog v-model="State.CreateMathBoolean" top="10vh" :close-on-click-modal="false" @close="ExitMathPanel">
      <div class="CreateMath-MathName">
        <span>{{ MathItem.name }}</span>
      </div>
      <div class="CreateMath-Time-Panel">
        <el-form :inline="true" :model="State.formInline" ref="formInline" :rules="rules">
          <el-form-item label="开始时间" prop="starttime">
            <el-date-picker v-model="State.formInline.starttime" type="datetime" placeholder="选择日期时间"
              @change="ConversionTime"></el-date-picker>
          </el-form-item>
          <el-form-item label="比赛时长" prop="timelong">
            <el-input v-model="State.formInline.timelong" class="CreateMath-time-input" maxlength="3"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="CreateMath-fault-panel">
        <div class="CreateMath-fault-left">
          <div class="CreateMath-faultCount" @click="GetSelectAllFaultPoint">
            <span>已选故障({{ State.SelectAllfaultCount }})</span>
          </div>
          <div class="CreateMath-fault-option">
            <el-input v-model="iptContent"></el-input>
            <el-button type="primary" @click="research">搜索</el-button>
          </div>
          <div class="CreateMath-faulttype">
            <el-scrollbar class="infinite-list">
              <!-- <div class="CreateMath-faulttype-moder" v-for="(its, indexs) in State.AllFault[0].systems" :key="indexs"
                @click="GetSelectFaultType(indexs)"> -->
              <div class="CreateMath-faulttype-moder" v-for="(its, indexs) in State.systemsTit" :key="indexs"
                @click="GetSelectFaultType(its)">
              <span class="CreateMath-span-name">{{ its }}({{ State.FaultErrorCount[indexs] }})</span>
          </div>
          </el-scrollbar>
        </div>
        <div class="CreateMath-faultpoint-panel">
          <el-scrollbar class="infinite-list">
            <div class="CreateMath-faultpoint-moder" v-for="(its, indexs) in State.AllTaskName" :key="indexs"
              :class="{ 'CreateMath-fault-active': State.faultSelect.indexOf(its) != -1 }"
              @click="GetSelectFaultPoint(its, indexs)">
              <span class="CreateMath-fault-name">{{ its.name }}</span>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <div class="CreateTask-fault-btn">
        <div class="fault-btn-panel">
          <div @click="EditMathSubject">确定</div>
          <div @click="ExitMathPanel">取消</div>
        </div>
      </div>
  </div>
  </el-dialog>
  </div>
</template>

<script>
import { defineComponent, reactive, toRef, toRefs, ref, watch, onMounted } from "vue";
import { postData } from "@/assets/js/pubilcs.js";
import { dateToFormat } from "@/assets/js/pubilcs.js";
import { ElMessage } from 'element-plus'
const iptContent = ref()
export default defineComponent({
  name: "CreateMath",
  components: {},
  props: {
    CreateMathBoolean: {
      type: Boolean,
      default: false,
    },
    AllFault: {
      type: Array,
      default: () => [],
    },
    AllformInline: {
      type: Array,
      default: () => [],
    },
    MathItem: {
      type: Object,
      default: {},
    },
    MathIndex: {
      type: null,
      default: 0,
    },
  },
  setup(props, ctx) {
    let State = reactive({
      CreateMathBoolean: false,
      formInline: {
        starttime: '',
        timelong: 0,
      },
      //所有比赛信息
      AllformInline: [],
      //传过来的index值
      MathIndex: 0,
      MathItem: {},
      //所有的故障点
      AllFault: [],
      //新的故障点
      AllTaskName: [],
      //旧的故障点
      OldAllTaskName: [],
      //储存每样故障的总数
      FaultErrorCount: [],
      //储存选中的故障
      faultSelect: [],
      //选择的故障总数
      SelectAllfaultCount: 0,
      //故障的code码
      AllfaultSelectCode: '',
      // 故障标题点system
      systemsTit: []
    })
    let rules = reactive({
      starttime: [
        {
          required: true,
          message: '请输入比赛时间',
          trigger: 'blur',
        }
      ],
    })

    function research() {
      if (!iptContent.value) {
        ElMessageBox.alert('请输入搜索内容', '提示', {
          confirmButtonText: 'OK',
        })
      }
      let data = [];
      for (let i = 0; i < State.AllTaskName.length; i++) {
        if (State.AllTaskName[i].name.indexOf(iptContent.value) != -1) {
          data.push(State.AllTaskName[i]);
        }
      }
      State.AllTaskName = []
      data.forEach(item => {
        State.AllTaskName.push(item)
      });
    }

    let formInline = ref('')
    watch(() => props.AllformInline, (val, old) => {
      State.AllformInline = val
    },
      { deep: true }
    )
    watch(() => props.MathIndex, (val, old) => {
      State.MathIndex = val
    },
      { deep: true }
    )
    //组卷面板的显示
    watch(() => props.CreateMathBoolean, (val, old) => {
      State.CreateMathBoolean = val
    },
      { deep: true }
    )
    //所有的比赛故障
    watch(() => props.AllFault, (val, old) => {
      State.AllFault = val
      console.log('State.AllFault', State.AllFault);
      State.systemsTit = State.AllFault[0].systems
      for (let i = 0; i < State.AllFault.length; i++) {
        State.FaultErrorCount[i] = 0
      }
      State.MathItem = props.MathItem
      //显示比赛的时间
      State.formInline.starttime = State.MathItem.startTime
      //比赛的时间日常
      State.formInline.timelong = State.MathItem.duration
      //判断是不是组卷
      if (State.MathItem.content === '') {
        HandleAllFault()
      } else {
        //组卷进行操作
        State.AllfaultSelectCode = State.MathItem.content
        //切割code码
        let codearr = State.MathItem.content.split(",")
        //临时存储所有的故障码
        let Alltaskname = []
        console.log('State.AllFault', State.AllFault);
        for (let i = 0; i < State.AllFault.length; i++) {
          // for (let j = 0; j < State.AllFault[i].projects.length; j++) {
          for (let j = 0; j < State.AllFault[i].projectGroups.length; j++) {
            // Alltaskname.push(State.AllFault[i].projects[j])
            Alltaskname.push(State.AllFault[i].projectGroups[j])
          }
        }
        //清空所有的信息
        State.faultSelect = []
        State.AllTaskName = []
        State.OldAllTaskName = []
        State.SelectAllfaultCount = 0
        //储存已选中的故障码以及显示的故障码
        for (let i = 0; i < codearr.length; i++) {
          for (let j = 0; j < Alltaskname.length; j++) {
            if (codearr[i] === Alltaskname[j].code) {
              State.faultSelect.push(Alltaskname[j])
              State.AllTaskName.push(Alltaskname[j])
            }
          }
        }
        //显示故障总数与各个的故障数
        for (let i = 0; i < State.faultSelect.length; i++) {
          for (let j = 0; j < State.AllFault.length; j++) {
            if (State.faultSelect[i].system === State.AllFault[j].name) {
              State.FaultErrorCount[j] += 1
              State.SelectAllfaultCount += 1
            }
          }
        }
      }
    },
      { deep: true }
    )
    // 单体比赛的信息
    watch(() => props.MathItem, (val, old) => {
      State.MathItem = val

    },
      { deep: true }
    )
    //处理选择的时间
    function ConversionTime(data) {
      State.formInline.starttime = dateToFormat(data)
    }
    //退出组卷对话框
    function ExitMathPanel() {
      ctx.emit("ExitMathPanel", false)
      State.AllFault = []
      State.AllTaskName = []
      State.SelectAllfaultCount = 0
      State.faultSelect = []
      iptContent.value = ''

    }
    //处理传过来的故障数组与数据
    function HandleAllFault() {
      for (let i = 0; i < State.AllFault.length; i++) {
        console.log('State.AllFault[i]', State.AllFault[i], '---', State.AllFault[i].systems, '-----', State.AllFault[0]);
        // for (let j = 0; j < State.AllFault[i].projects.length; j++) {
        //   State.AllTaskName.push(State.AllFault[i].projects[j])
        // }
        for (let j = 0; j < State.AllFault[i].projectGroups.length; j++) {
          State.AllTaskName.push(State.AllFault[i].projectGroups[j])
        }
      }
      for (let i = 0; i < State.AllFault.length; i++) {
        State.FaultErrorCount[i] = 0
      }
      State.OldAllTaskName = State.AllTaskName
    }
    //选取故障类型
    function GetSelectFaultType(value) {
      let newArr = []
      State.AllFault[0].projectGroups.forEach((element) => {
        if(element.system == value) {
          newArr.push(element)
        }
      });
      // State.AllTaskName = State.AllFault[index].projects
      State.AllTaskName = newArr
    }
    //故障选中
    function GetSelectFaultPoint(its, index) {
      if (State.faultSelect.indexOf(its) !== -1) {
        for (let i = 0; i < State.AllFault.length; i++) {
          if (its.system === State.AllFault[i].name) {
            State.FaultErrorCount[i] -= 1
            State.SelectAllfaultCount -= 1
            State.faultSelect.splice(State.faultSelect.indexOf(its), 1)
          }
        }
      } else {
        for (let i = 0; i < State.AllFault.length; i++) {
          if (its.system === State.AllFault[i].name) {
            if (State.FaultErrorCount[i] < 4) {
              State.FaultErrorCount[i] += 1
              State.SelectAllfaultCount += 1
              State.faultSelect.push(its)
            } else if (State.FaultErrorCount[i] >= 4) {
              ElMessage.error('该类型故障点只能选取4个')
            }
          }
        }
      }
      let faultSelectString = []
      for (var i = 0; i < State.faultSelect.length; i++) {
        faultSelectString.push(parseInt(State.faultSelect[i].code))
      }
      State.AllfaultSelectCode = faultSelectString.toString()
    }
    //获取所有选取的故障点
    function GetSelectAllFaultPoint() {
      State.AllTaskName = []
      for (let i = 0; i < State.faultSelect.length; i++) {
        State.AllTaskName.push(State.faultSelect[i])
      }
      State.SelectAllfaultCount = State.faultSelect.length
      //显示所有故障总数
      console.log('点击的已选故障');
    }




    //创建组卷(使用编辑功能创建比赛)
    function EditMathSubject() {
      if (!State.AllfaultSelectCode) {
        ElMessage.error('实训故障没有选择')
        return
      }
      if (State.formInline.timelong === 0) {
        ElMessage.error('请填写具体比赛时长')
        return
      }

      //编辑
      postData("/api/SkillsContest/EditSCInformation", JSON.stringify(
        { name: State.MathItem.name, startTime: State.formInline.starttime, duration: State.formInline.timelong, content: State.AllfaultSelectCode, id: State.MathItem.id }), sessionStorage.getItem("token")).
        then(function (rep) {
          if (rep.result.result) {
            console.log(rep)
            // State.AllformInline[State.MathIndex] = rep.result.result
            //传送给父组件最新的数据
            //  ctx.emit("SetAllformInline",State.AllformInline)
            ctx.emit("Resetlist")
            ElMessage({
              message: '操作成功',
              type: 'success',
            })
            State.CreateMathBoolean = false
          }
        })
        .catch((error) => {
          console.log(error)
        });
      iptContent.value = ''
    }
    onMounted(() => {

    });
    return {
      iptContent,
      State,
      rules,
      formInline,
      ExitMathPanel,
      GetSelectFaultType,
      GetSelectFaultPoint,
      GetSelectAllFaultPoint,
      EditMathSubject,
      ConversionTime,
      dateToFormat,
      research,
    };
  },
});
</script>
<style lang="less">
.CreateMath-Panel {
  width: 100%;
  height: 100%;
}

.CreateMath-Panel .el-dialog {
  position: relative;
  width: 1200px;
  height: 800px;
  background: #FFFFFF;
  border-radius: 20px;
}

.CreateMath-Panel .el-dialog__body {
  height: 75%;
}

.CreateMath-MathName {
  margin-bottom: 30px;
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 22px;
  color: #81859c;
  font-family: Source Han Sans CN;
  font-weight: 400;
}

.CreateMath-MathName span {
  margin-left: 20px;
}

.CreateMath-Time-Panel {
  margin-bottom: 10px;
  margin-left: 20px;
  width: auto;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.CreateMath-time-input::before {
  position: absolute;
  content: "分钟";
  top: 0px;
  left: 165px;
}

.CreateMath-fault-panel {
  position: relative;
  width: 100%;
  height: 83%;
  border: 1px solid rgba(54, 56, 75, 0.2);
  border-left: 0px;
  border-right: 0px;
}

.CreateMath-fault-left {
  width: 160px;
  height: 100%;
  border: 1px solid rgba(54, 56, 75, 0.2);
  border-left: 0px;
  border-bottom: 0px;
  border-top: 0px;
}

.CreateMath-faultCount {
  width: 98%;
  height: 60px;
  border: 1px solid rgba(54, 56, 75, 0.2);
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
  font-size: 16px;
}

.CreateMath-faulttype {
  width: 100%;
  height: 87.6%;
}

.CreateMath-faulttype .infinite-list {
  width: 100%;
  height: 100%;
}

.CreateMath-faulttype-moder {
  width: 96%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(54, 56, 75, 0.2);
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  cursor: pointer;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
  font-size: 16px;
}

.CreateMath-fault-option {
  position: absolute;
  left: 160px;
  top: 0;
  width: 86%;
  height: 60px;
  border: 1px solid rgba(54, 56, 75, 0.2);
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.CreateMath-fault-option .el-input {
  width: 200px;
  height: 40px;
  margin-right: 10px;
}

.CreateMath-fault-option .el-button {
  margin-right: 30px;
}

.CreateMath-faultpoint-panel {
  position: absolute;
  left: 160px;
  top: 60px;
  width: 86%;
  height: 87.6%;
}

.CreateMath-faultpoint-panel .infinite-list {
  width: 100%;
  height: 100%;
}

.CreateMath-faultpoint-panel .el-scrollbar__view {
  display: flex;
  flex-wrap: wrap;
}

.CreateMath-faultpoint-moder {
  width: 470px;
  height: 40px;
  border-radius: 10px;
  // background: rgba(129, 133, 156, 1);
  background-color: rgba(129, 133, 156, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  margin-left: 15px;
  cursor: pointer;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
  font-size: 16px;
}

.CreateMath-faultpoint-panel .el-scrollbar__view>div:nth-last-child(1) {
  margin-bottom: 15px;
}

.CreateTask-fault-btn {
  margin-top: 30px;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.CreateTask-fault-btn .fault-btn-panel {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.CreateTask-fault-btn .fault-btn-panel>div {
  width: 30%;
  height: 100%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  border-radius: 10px;
  background: linear-gradient(0deg, #807de1 0%, #218cde 100%);
  cursor: pointer;
}




.CreateMath-fault-active {
  color: #FFFFFF;
  background: linear-gradient(-90deg, #0974D8, #3D8EF1, #7C7FF8);
}
</style>
